<template>
<div>
    {{msg}}
<HeaderM :receive = 'receive' ></HeaderM>
<List></List>
<FooterM></FooterM>
</div>
</template>

<script>
import HeaderM from './components/HeaderM'
import List from './components/List'
import FooterM from './components/FooterM'


export default {
    name:'App',
    components:{
        HeaderM,
        List,
        FooterM
    },
    // 下面写一个函数，传给header组件，通过函数把值传到父组件App这里，父给孙子传可以一层层传下去，还有更好的方法
    // 子组件给父组件传值可以让父组件给子组件传一个函数，通过函数把值传回来
    //prop的值不能改是浅层的，如果是对象不改地址就不算改了，但是尽量别改吧，万一出错了呢

    // props适合于子给父，父给子
    methods: {
        receive(val){
            console.log("子组件header传给我的值是"+val)
            this.msg = val
        }
    },
    data(){
        return {
            msg:'这里会放子组件传进来的值'
        }
    }
}
</script>


<style>

</style>